<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>QQ聊天</title>
		<link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
		<script type='text/javascript' src='http://g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>

		<script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		<link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_471035_56wmy47l0dgta9k9.css"/>
	</head>
	<body>
		<div class="page-group">
        <!-- 单个page ,第一个.page默认被展示-->
        <div class="page">
            <!-- 标题栏 -->
            <header class="bar bar-nav">
                <a class="icon pull-left open-panel" href="index.html#router2"><i class="iconfont icon-mjiantou-copy" style="font-size: 20px;"></i>联系人</a>
                 <h1 class="title">添加</h1>
            </header>

	            <!-- 这里是页面内容区 -->
	            <div class="content">
	            	<div class="buttons-tab">
					    <a href="#tab1" class="tab-link active button">找人</a>
					    <a href="#tab2" class="tab-link button">找群</a>
					    <a href="#tab3" class="tab-link button">找公众号</a>
					</div>
					<div class="content-block">
					    <div class="tabs">
					        <div id="tab1" class="tab active">
					        
							      <div id="tab1" class="tab active">
							        <div class="content-block">
							            <div class="list-block media-list content2a">
										    <ul>
										        <li>
											        <div class="item-content">
											          <div class="item-inner">
											            <div class="item-title-row">
											               <a class="item-title"><i class="iconfont icon-iconfontyoujiantou"></i><span class="content2i black">特别关注</span></a>
											               <span class="ding2">10/10</span>
											            </div>
											            <div class="item-title-row">
											               <a class="item-title"><i class="iconfont icon-iconfontyoujiantou"></i><span class="content2i black">高中同学</span></a>
											               <span class="ding2">13/88</span>
											            </div>
											            <div class="item-title-row">
											               <a class="item-title"><i class="iconfont icon-iconfontyoujiantou"></i><span class="content2i black">好友</span></a>
											               <span class="ding2">77/100</span>
											            </div>
											            <div class="item-title-row">
											               <a class="item-title"><i class="iconfont icon-iconfontyoujiantou"></i><span class="content2i black">我的好友</span></a>
											               <span class="ding2">20/60</span>
											            </div>
											            <div class="item-title-row">
											               <a class="item-title"><i class="iconfont icon-iconfontyoujiantou"></i><span class="content2i black">我的好友</span></a>
											               <span class="ding2">6/28</span>
											            </div>
											            
											            
											            </div>
											        </div>
										        </li>
										      
										    </ul>
										</div>
							        </div>
							        </div> 
							    </div>
						    
						    <!--2-->
						    <div id="tab2" class="tab">
								<div class="content-block">
									<div class="list-block media-list content2a">
										<ul>
											<li>
												<div class="item-content">
													<div class="item-media"><img src="images/Q7.jpg" style='width: 2.2rem;'></div>
													<div class="item-inner">
														<div class="item-title-row">
															<div class="item-title">我的电脑</div>
														</div>
														<div class="item-subtitle">[在线]无需数据线，手机轻松传文件到.....</div>
													</div>
												</div>
											</li>
											<li>
												<div class="item-content">
													<div class="item-media"><img src="images/Q7.jpg" style='width: 2.2rem;'></div>
													<div class="item-inner">
														<div class="item-title-row">
															<div class="item-title">发现新设备</div>
														</div>
														<div class="item-subtitle">搜索附件的设备，手机轻松传文件到.....</div>
													</div>
												</div>
											</li>
											<li>
												<div class="item-content">
													<div class="item-media"><img src="images/Q7.jpg" style='width: 2.2rem;'></div>
													<div class="item-inner">
														<div class="item-title-row">
															<div class="item-title">无题</div>
														</div>
														<div class="item-subtitle">无敌是多么多么的寂寞.....</div>
													</div>
												</div>
											</li>
										</ul>
									</div>
							
								</div>
							</div>
							
							<!--3-->
							
							<div id="tab3" class="tab">
								<div class="content-block">
									<div class="list-block media-list content2a">
										<ul>
											<li>
												<div class="item-content">
													<div class="item-media"><img src="images/Q7.jpg" style='width: 2.2rem;'></div>
													<div class="item-inner">
														<div class="item-title-row">
															<div class="item-title">我的电脑</div>
														</div>
														<div class="item-subtitle">[在线]无需数据线，手机轻松传文件到.....</div>
													</div>
												</div>
											</li>
											<li>
												<div class="item-content">
													<div class="item-media"><img src="images/Q7.jpg" style='width: 2.2rem;'></div>
													<div class="item-inner">
														<div class="item-title-row">
															<div class="item-title">发现新设备</div>
														</div>
														<div class="item-subtitle">搜索附件的设备，手机轻松传文件到.....</div>
													</div>
												</div>
											</li>
											<li>
												<div class="item-content">
													<div class="item-media"><img src="images/Q7.jpg" style='width: 2.2rem;'></div>
													<div class="item-inner">
														<div class="item-title-row">
															<div class="item-title">无题</div>
														</div>
														<div class="item-subtitle">无敌是多么多么的寂寞.....</div>
													</div>
												</div>
											</li>
										</ul>
									</div>
							
								</div>
							</div>
							
						</div>  <!--tabs-->
					</div>
	            	
	            	
	            	
	                
	                
	                
	                
	            </div>
	        </div>
	
	    </div>
	
	</body>
</html>
